<template>
    <div class="transfer">
        <mu-row gutter class="list-row">
            <mu-col span="6">
                <div class="list-title">
                    {{leftData.title}}
                </div>
                <div class="list-content">
                    <el-scrollbar style="height:100%;">
                        <transition-group name="list" tag="p">
                            <dl class="pointer" v-for="(item,index) in leftData.list" :key="index" @click="addItem(index)">
                                <mu-ripple class="ripple" color="#2261ca" :opacity="0.5">
                                    {{item.name}}
                                    <mu-icon color="primary" value="done" right class="list-icon"></mu-icon>
                                </mu-ripple>
                            </dl>
                        </transition-group>
                    </el-scrollbar>
                </div>
            </mu-col>
            <mu-col span="6">
                <div class="list-title">
                    {{rightData.title}}
                </div>
                <div class="list-content">
                    <el-scrollbar style="height:100%;">
                        <transition-group name="list" tag="p">
                            <dl class="pointer" v-for="(item,index) in rightData.list" :key="index" @click="removeItem(index)">
                                <mu-ripple class="ripple" color="#cc2432" :opacity="0.5">
                                    {{item.name}}
                                    <mu-icon color="error" value="close" right class="list-icon"></mu-icon>
                                </mu-ripple>
                            </dl>
                        </transition-group>
                    </el-scrollbar>
                </div>
            </mu-col>
        </mu-row>
        <mu-row class="footer">
            <mu-col span="4" offset="4">
                <mu-button color="primary" @click="submit">提交</mu-button>
            </mu-col>
        </mu-row>
    </div>
</template>
<script>
export default {
    props: ['leftData', 'rightData'],
    data() {
        return {
            searchText: ''
        };
    },
    methods: {
        filterItem() {
            for (let i = 0; i < this.rightData.list.length; i++) {
                for (let j = 0; j < this.leftData.list.length; j++) {
                    if (this.rightData.list[i].device_id.includes(this.leftData.list[j].device_id)) {
                        this.leftData.list.splice(j, 1);
                        j--;
                    }
                }
            }
        },
        addItem(index) {
            this.rightData.list.push(this.leftData.list[index]);
            this.leftData.list.splice(index, 1);
            this.itemSort(this.rightData.list);
        },
        removeItem(index) {
            this.leftData.list.push(this.rightData.list[index]);
            this.rightData.list.splice(index, 1);
            this.itemSort(this.leftData.list);
        },
        itemSort(arr) {
            if (arr.length > 0) {
                arr.sort((a, b) => {
                    return Number(a.device_id) - Number(b.device_id);
                });
            }
        },
        submit() {
            this.$emit('transferResult', this.rightData);
        }
    },
    created() {
        this.filterItem();
    }
};
</script>
<style lang="scss">
@import "../../assets/css/common.scss";
.transfer {
  height: 100%;
  .list-row {
    height: calc(100% - 50px);
    .col {
      height: 100%;
      .list-title {
        font-size: $FONT_SIZE + 1;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .list-content {
        height: calc(100% - 60px);
        width: 100%;
        border: 1px solid $BORDER_COLOR;
        text-align: left;
        .is-horizontal {
          display: none;
        }
        dl {
          width: 100%;
          @include height(35px);
          padding-left: 20px;
          position: relative;
          @include transition();
          > .ripple {
            @include size(100%, 100%);
            .list-icon {
              vertical-align: middle;
              float: right;
              line-height: 35px;
              margin-right: 20px;
              opacity: 0;
              @include transition();
              // color: $MAIN_BLUE_COLOR;
            }
          }
          &:hover {
            background-color: $BODY_BG;
            .list-icon {
              opacity: 1;
            }
          }
        }
        .list-leave-active {
          position: absolute;
        }
        .list-enter,
        .list-leave-to {
          opacity: 0;
          transform: translateX(60px);
        }
      }
    }
  }
  .footer {
    height: 60px;
    button {
      width: 100%;
    }
  }
}
</style>